<template>
  <el-popover
    placement="bottom-start"
    width="320"
    v-model="visible"
    trigger="click">
    <div class="el-picker-panel__body-wrapper">
      <div class="el-picker-panel__body">
        <div class="el-date-picker__header el-date-picker__header--bordered">
          <button type="button" aria-label="前一年" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
          <span role="button" class="el-date-picker__header-label">{{year - 4}} 年 - {{year + 5}} 年</span>
          <button type="button" aria-label="后一年" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right" @click="next"></button>
        </div>
        <div class="el-picker-panel__content">
          <table class="el-month-table" style="table-layout: fixed;width: 100%;">
            <tbody>
              <tr v-for="(item, index) in yearList" :key="'tr_' + index">
                <td v-for="(val, index) in item" 
                  :class="{'today': val.today, 'disabled': val.disabled, 'start-date': val.year == currValue[0], 'in-range': (val.year >= currValue[0] && val.year <= currValue[1]), 'end-date': val.year == currValue[1]}" :key="'td_' + index">
                  <div>
                    <a class="cell" @click="clickYear(val)" @mousemove="focusYear(val)">{{val.year}}</a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div slot="reference">
      <el-input :value="valueText" :placeholder="placeholder" clearable @clear="handleClear"></el-input>
    </div>
  </el-popover>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    valueFormat: {
      type: String,
      default: 'yyyy'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    placeholder: {
      type: String,
      default: '选择日期'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    }
  },
  created() {
    this.generateYearList()
  },
  data() {
    return {
      visible: false,
      year: new Date().getFullYear(),
      yearList: [],
      currValue: this.value ? this.value.map(item => (new Date(item)).getFullYear()) : []
    }
  },
  watch: {
    value(value) {
      if(!value || !value.length) return
      this.currValue = value.map(item => (new Date(item)).getFullYear())
    }
  },
  created() {
    this.generateYearList()
  },
  computed: {
    valueText: {
      get() {
        if(this.value && this.value.length) {
          return this.value[0] + ' ' + this.rangeSeparator + ' ' + this.value[1]
        }
      }
    }
  },
  methods: {
    // 根据传入的年份 生成前四年后五年的年份数据
    generateYearList(year) {
      year = year || new Date().getFullYear()
      let start = year - 5
      let list = [[], [], []]
      let j
      for(let i = 0; i < 10; i++) {
        start++
        if(i < 4) {
          j = 0
        } else if(i < 8) {
          j = 1
        } else {
          j = 2
        }
        list[j].push({
          year: start,
          today: start === new Date().getFullYear(),
          disabled: this.$attrs.pickerOptions && this.$attrs.pickerOptions.disabledDate(new Date(start + ''))
        })
      }
      this.yearList = list
    },
    prev() {
      this.year -= 10
      this.generateYearList(this.year)
    },
    next() {
      this.year += 10
      this.generateYearList(this.year)
    },
    handleClear() {
      this.__select_value = []
      this.$emit('input', null)
      this.$emit('change', null)
    },
    focusYear(e) {
      if(e.disabled) return
      let value = e.year
      if(!this.__select_value) {
        this.__select_value = []
      }
      if(this.__select_value.length === 1) {
        if(value < this.currValue[1]) {
          this.currValue = [value, this.currValue[1]]
        } else {
          this.currValue = [this.currValue[0], value]
        }
      }
    },
    clickYear(e) {
      if(e.disabled) return
      let value = e.year
      if(!this.__select_value) {
        this.__select_value = []
      }
      if(this.__select_value.length === 2 || this.__select_value.length === 0) {
        this.__select_value = [value]
        this.currValue = [value, value]
      } else {
        this.__select_value.push(value)
        if(value < this.currValue[1]) {
          this.currValue = [value, this.currValue[1]]
        } else {
          this.currValue = [this.currValue[0], value]
        }
        let formatYear = this.currValue.map((item, index) => {
          if(index === 0) {
            item = (new Date(item + '')).Format(this.valueFormat)
          } else {
            item = new Date(new Date(new Date(item + '').setMonth(12)).setDate(0)).Format(this.valueFormat)
          }
          return item
        })
        this.$emit('input', formatYear)
        this.$emit('change', formatYear)
        this.visible = false
      }
    }
  }
}
</script>